<template>
  <div>
    <el-button type="primary" @click="addAttrShow = true">添加</el-button>

    <!-- 添加商品参数弹窗 -->
    <attribute-add
      v-if="addAttrShow"
      v-model:dialog-visible="addAttrShow"
      @refresh-table="initGetAttributeList"
    ></attribute-add>

    <!-- 编辑商品参数弹窗 -->
    <attribute-update
      v-if="updateAttrShow"
      v-model:dialog-visible="updateAttrShow"
      :form-data="attributeDetail"
      @refresh-table="initGetAttributeList"
    ></attribute-update>

    <!-- 商品参数列表 -->
    <el-table :data="attributeTableList" style="width: 100%">
      <el-table-column fixed="left" prop="id" label="编号" width="100" />
      <el-table-column prop="ruleName" label="商品名称" width="200" />
      <el-table-column prop="ruleValue" label="规格名称">
        <template #default="scope">
          <div>
            <el-tag
              v-for="(item, index) in goodsName(scope.row.ruleValue)"
              :key="index"
              style="margin: 7px"
              type="warning"
            >
              {{ item }}</el-tag
            >
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="ruleValue" label="规格">
        <template #default="scope">
          <div
            v-for="(item, index) in goodsSpecs(scope.row.ruleValue)"
            :key="index"
            style="margin: 10px 0"
          >
            <el-tag> {{ item }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template #default="{ row }">
          <el-button size="small" @click="updateHandle(row)">编辑</el-button>
          <el-button type="danger" size="small" @click="deleteHandle(row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 删除商品参数弹窗 -->
    <attribute-delete
      v-if="deleteShow"
      v-model:dialog-visible="deleteShow"
      :att-id="attId"
      @refresh-table="initGetAttributeList"
    ></attribute-delete>
  </div>
</template>

<script setup lang="ts">
import {
  getAttributelist,
  getAttributeDetail,
  AttributeList,
} from '@/api/goods/admin-attribute'

import attributeAdd from './attribute-add.vue'
import attributeDelete from './attribute-delete.vue'
import AttributeUpdate from './attribute-update.vue'
import { queryReq } from '@/utils/http/code'

const emit = defineEmits([''])
const props = defineProps({
  propData: {
    type: String,
    default: '',
  },
})
//const { } = toRefs(props);

interface AttrArry {
  value: string
  detail: string[]
}
/**
 * 定义删除对话弹窗开关
 */
const deleteShow = ref(false)

/**
 * 定义添加对话弹窗开关
 */
const addAttrShow = ref(false)

/**
 * 定义编辑对话弹窗开关
 */
const updateAttrShow = ref(false)
/**
 * 定义列表的id
 */
const attId = ref(0)
/**
 * 定义对象里的规格值
 */
const attributeDetail = ref()

/**
 * 点击编辑按钮
 * @param row
 */
const updateHandle = async (row: AttributeList) => {
  //根据商品参数id获取商品参数详情
  const res = await getAttributeDetail(row.id)

  //判断是否请求成功
  queryReq(res, () => {
    //赋值
    attributeDetail.value = res.data
    //把请求响应数据里的ruleValue从json字符串转成对象
    const ruleValue = JSON.parse(res.data.ruleValue)
    //添加用于输入的参数
    ruleValue.inputValue = ''
    //添加是否显示规格属性添加按钮开关
    ruleValue.inputVisible = false
    //重新赋值
    attributeDetail.value.ruleValue = ruleValue
    //打开弹窗
    updateAttrShow.value = true
  })
}

/**
 * 删除商品参数
 */
const deleteHandle = (row: AttributeList) => {
  attId.value = row.id
  deleteShow.value = true
}
/**
 * 将JSON字符串改成对象
 */
const goodsName = computed(() => {
  return (b: any) => {
    //转成JSON字符串转成对象
    const res: AttrArry[] = JSON.parse(b)

    //["糖度","温度"]
    const str = res.map((v) => {
      return v.value
    })
    //数组转成字符串
    //join里面是连接符
    return str
  }
})

const goodsSpecs = computed(() => {
  return (b: string) => {
    //转成JSON字符串转成对象
    const res: AttrArry[] = JSON.parse(b)

    console.log(res)
    //拿到detail
    //[['正常糖', '七分糖', '五分糖'], ['正常', '少冰', '多冰']]
    const a = res.map((v) => {
      return v.detail
    })
    //遍历数组里的值
    const b1 = a.map((v) => {
      //分割数组变成字符串 变成  正常糖,七分糖,五分糖
      return v.join()
    })

    return b1
  }
})
const attributeTableList = ref<AttributeList[]>([])
const initGetAttributeList = async () => {
  const res = await getAttributelist()
  attributeTableList.value = res.data.list
}

initGetAttributeList()
</script>
<style lang="scss" scoped></style>
